总结包含以下内容：i++和++i  的区别，i++和++i  在循环中的区别，arr[i++]和arr[++i]  在循环中的区别，arr[i++]+=1和arr[++i]+=1  在循环中的区别，arr[i++]的使用

Array-arr++
Array-arr++

前几天做Canvas倒计时的时候，慕课网的老师讲到了一个及时清除不在画布中的小球的做法。以下是实现代码：

1
2
3
4
5
6
7
8
9
10
11
12
//及时清空跳出画布的小球，优化页面的内存
var cnt=0
for(var i=0;i<balls.length;i++){
	if(balls[i].x+radius>0&&balls[i].x-radius<canvasWidth){
		//小球数组中的第0个到cnt-1个是在canvas画布中
		balls[cnt++]=balls[i];
	}
}
//删除前面的数组使用balls.shift()
while(balls.length>cnt){
	balls.pop();//删除第cnt个到balls.length-1个数组
}

arr[i++]是什么呢？于是开始一步一步地探索

i++和++i

大一的时候上java课，老师讲过了这样的题，想必学过计算机相关的都知道    (/▽╲)

1
2
3
4
5
6
7
8
9
10
11
var a=1;
var b=2;
a=b++;
console.log("a的值是："+a+"，"+"b的值是："+b);
//"a的值是：2，b的值是：3"
var c=1;
var d=2;
c=++d;
console.log("c的值是："+c+"，"+"d的值是："+d);
//"c的值是：3，d的值是：3"

a=b++是b先把值赋给a，自身再加1；a=++b是b先自身加1，再把值赋给a

i++和++i  在循环中的区别

  • i++在循环中的输出：
1
2
3
4
5
6
var arr=[11,12,13,14,15,16];
for(var i=0;i<arr.length;i++){
  console.log(i++);
  //依次输出0,2,4
}
  • ++i在循环中的输出：
1
2
3
4
5
6
var arr=[11,12,13,14,15,16];
for(var i=0;i<arr.length;i++){
  console.log(++i);
  //依次输出1,3,5
}

arr[i++]和arr[++i]在循环中的区别

  • arr[i++]在循环中的输出：
1
2
3
4
5
6
var arr=[11,12,13,14,15,16];
for(var i=0;i<arr.length;i++){
   console.log(arr[i++]);
  //依次输出11,13,15
}
  • arr[++i]在循环中的输出：
1
2
3
4
5
6
var arr=[11,12,13,14,15,16];
for(var i=0;i<arr.length;i++){
   console.log(arr[++i]);
  //依次输出12,14,16
}

如果数组是奇数个，那么输出arr[++i]的最后一个数会是一个undefined

arr[i++]+=1和arr[++i]+=1在循环中的区别

  • arr[i++]+=1在循环中的输出：
1
2
3
4
5
6
7
var arr=[1,2,3];
for(var i=0;i<arr.length;i++){
    arr[i++]+=1;
} 
console.log(arr);
//输出[2,2,4]
  • arr[++i]+=1在循环中的输出：
1
2
3
4
5
6
7
var arr=[1,2,3];
for(var i=0;i<arr.length;i++){
    arr[++i]+=1;
} 
console.log(arr);
//输出[1,3,3,NaN]

由于数组是奇数个，所以最后arr[++i]+=1最后的输出结果是NaN，可以通过以下的代码验证

1
2
console.log(undefined+1);
//输出NaN

arr[i++]的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var arr=[
	{x: 1},
	{x: 5},
	{x: 9},
	{x: 3},
	{x: 10},
	{x: 6}
]
var cnt=0;
for(var i=0;i<arr.length;i++){
  if(arr[i].x<4){
    arr[cnt++]=arr[i]; 
    console.log('cnt的值是'+cnt+'，i的值是'+i);
    //"cnt的值是1，i的值是0"
    //"cnt的值是2，i的值是3"
  }	
} 
while(arr.length>cnt){
  arr.pop();
}
console.log(arr);
//   [
//     [object Object] {x: 1}, 
//     [object Object] {x: 3}
//   ]

这说明了第0到cnt-1个留在arr中，cnt到arr.length-1的数组删除，使用这个技巧就可以来去除不符合判断语句的数组了